<template>
  <!-- 侧边栏主容器 - 通过collapsed类控制折叠状态 -->
  <aside class="modern-sidebar" :class="{ collapsed: isCollapsed }">
    <!-- 侧边栏头部：包含Logo和标题 -->
    <header class="sidebar-header">
      <div class="logo-container">
        <!-- 侧边栏Logo -->
        <img src="@/assets/weblog_logo.jpg" class="sidebar-logo" alt="Weblog Logo" />
        <!-- 侧边栏标题，只在非折叠状态显示 -->
        <h1 class="sidebar-title" v-show="!isCollapsed">Weblog</h1>
      </div>
    </header>

    <!-- 侧边栏主体内容：包含导航菜单 -->
    <main class="sidebar-main">
      <!-- 导航菜单容器 -->
      <nav class="sidebar-nav">
        <!-- 菜单项循环渲染 -->
        <div
          v-for="(item, index) in menus"
          :key="item.path"
          :class="[
            'nav-item', // 基础导航项类
            { active: isActive(item.path) }, // 激活状态类
            { 'last-item': index === menus.length - 1 } // 最后一项标识
          ]"
          @click="handleItemClick(item.path)"
          @mouseenter="hoveredItem = index"
          @mouseleave="hoveredItem = null"
        >
          <!-- 导航图标容器 - 在这里控制图标的显示 -->
          <div class="nav-icon">
            <!-- 动态组件渲染图标 - icon名称从menus数组中获取 -->
            <el-icon>
              <component :is="item.icon" />
            </el-icon>
          </div>
          <!-- 导航文本 -->
          <span class="nav-text">{{ item.name }}</span>
          <!-- 激活状态指示器 -->
          <div class="active-indicator" v-if="isActive(item.path)"></div>
        </div>
      </nav>
    </main>

    <!-- 侧边栏底部：包含版本信息 -->
    <footer class="sidebar-footer" v-show="!isCollapsed">
      <div class="version-info">v1.0.0</div>
    </footer>
  </aside>
</template>

<script setup>
  // 导入Vue组合式API
  import { computed, ref } from "vue";
  // 导入菜单状态管理
  import { useMenuStore } from "@/stores/menu";
  // 导入路由相关
  import { useRoute, useRouter } from "vue-router";

  // 初始化状态管理和路由
  const menuStore = useMenuStore(); // 菜单状态存储，管理侧边栏宽度等状态
  const route = useRoute(); // 当前路由信息
  const router = useRouter(); // 路由导航实例

  // 鼠标悬停状态 - 用于处理菜单项的悬停效果
  const hoveredItem = ref(null);

  // 计算属性：检测侧边栏是否处于折叠状态
  // 通过比较menuStore中的menuWidth是否等于'64px'来判断
  const isCollapsed = computed(() => menuStore.menuWidth === "64px");

  // 判断菜单项是否为当前激活状态
  // 支持精确路径匹配和子路径匹配（如 /admin/article/list 也能匹配 /admin/article）
  const isActive = path => {
    return route.path === path || route.path.startsWith(path + "/");
  };

  // 处理菜单项点击事件 - 导航到对应路径
  const handleItemClick = path => {
    router.push(path);
  };

  // 菜单项配置数组
  // 每个菜单项包含：显示名称(name)、使用的图标(icon)、导航路径(path)
  // 注意：icon属性使用的是Element Plus图标库中的图标名称
  const menus = [
    { name: "仪表盘", icon: "Monitor", path: "/admin/index" },
    { name: "文章管理", icon: "Document", path: "/admin/article/list" },
    { name: "分类管理", icon: "FolderOpened", path: "/admin/category/list" },
    { name: "标签管理", icon: "PriceTag", path: "/admin/tag/list" },
    { name: "博客设置", icon: "Setting", path: "/admin/blog/setting" }
  ];
</script>

<style scoped>
  /* 侧边栏主容器样式 */
  .modern-sidebar {
    border: 3px solid #c3cbff;
    border-radius: 20px;
    margin-top: 40px;
    position: fixed;
    /* 固定定位，始终显示在左侧 */
    top: 0;
    left: 0;
    height: 65vh;
    /* 占满整个视口高度 */
    width: 180px;
    /* 展开状态下的宽度 */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-right: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.08);
    z-index: 100;
    /* 确保在其他元素之上 */
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    /* 更慢更流畅的过渡动画 */
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* 侧边栏头部样式 */
  .sidebar-header {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(255, 255, 255, 0.8);
  }

  /* Logo容器 */
  .logo-container {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  /* Logo样式 */
  .sidebar-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
  }

  /* Logo标题 */
  .sidebar-title {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
    transition: all 0.3s ease;
  }

  /* 侧边栏主体内容区域 */
  .sidebar-main {
    flex: 1;
    /* 占据剩余空间 */
    overflow-y: auto;
    /* 内容超出时显示滚动条 */
    padding: 20px 0;
  }

  /* 导航菜单容器 */
  .sidebar-nav {
    padding: 0 12px;
  }

  /* 导航项基础样式 */
  .nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 8px;
    border-radius: 12px;
    color: #5a6c7d;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    background: transparent;
    border: 1px solid transparent;
  }

  /* 导航项悬浮效果 */
  .nav-item:hover,
  .nav-item:has(.nav-text:hover) {
    background: rgba(52, 152, 219, 0.08);
    color: #3498db;
    transform: translateX(4px);
    border-color: rgba(52, 152, 219, 0.2);
  }

  /* 激活状态导航项样式 - 设置更高优先级 */
  .nav-item.active {
    background: linear-gradient(135deg, #4285f4 0%, #34a853 100%);
    color: white;
    transform: translateX(4px);
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(66, 133, 244, 0.3);
  }

  /* 激活状态下的悬停效果 - 确保激活样式优先 */
  .nav-item.active:hover,
  .nav-item.active:has(.nav-text:hover) {
    background: linear-gradient(135deg, #4285f4 0%, #34a853 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(66, 133, 244, 0.3);
  }

  /* 导航图标容器 - 关键部分：在这里控制图标大小 */
  .nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    /* 图标的容器宽度 - 修改这里可以改变图标大小 */
    height: 24px;
    /* 图标的容器高度 - 修改这里可以改变图标大小 */
    flex-shrink: 0;
    /* 防止图标被压缩 */
    font-size: 16px;
    /* 图标字体大小 - 修改这里可以直接调整图标显示大小 */
    transition: all 0.3s ease;
  }

  /* 提示：如果想修改图标大小，可以同时调整上述的width、height和font-size属性 */

  /* 激活状态下的图标特殊处理 */
  .nav-item.active .nav-icon {
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
  }

  /* 导航文字样式 */
  .nav-text {
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex: 1;
  }

  /* 激活状态指示器样式 */
  .active-indicator {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
    animation: pulse 2s infinite;
  }

  /* 脉冲动画效果 */
  @keyframes pulse {
    0%,
    100% {
      opacity: 1;
      transform: translateY(-50%) scale(1);
    }

    50% {
      opacity: 0.7;
      transform: translateY(-50%) scale(1.2);
    }
  }

  /* 侧边栏底部样式 */
  .sidebar-footer {
    padding: 16px 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(255, 255, 255, 0.8);
  }

  /* 版本信息样式 */
  .version-info {
    font-size: 12px;
    color: #95a5a6;
    text-align: center;
    font-weight: 400;
  }

  /* 折叠状态下的侧边栏样式 - 关键部分 */
  .collapsed {
    width: 60px !important;
    /* 折叠状态下的宽度 */
  }

  /* 折叠状态下的标题隐藏 */
  .collapsed .sidebar-title {
    opacity: 0;
    width: 0;
  }

  /* 折叠状态下的导航文字隐藏 */
  .collapsed .nav-text {
    opacity: 0;
    width: 0;
    margin: 0;
    overflow: hidden;
  }

  /* 折叠状态下的导航项样式调整 */
  .collapsed .nav-item {
    justify-content: center;
    /* 居中显示图标 */
    padding: 14px 8px;
    /* 调整内边距 */
    margin-bottom: 8px;
  }

  /* 折叠状态下的导航项交互效果 */
  .collapsed .nav-item:hover,
  .collapsed .nav-item.active {
    transform: none;
    /* 移除平移效果 */
  }

  /* 折叠状态下的侧边栏底部隐藏 */
  .collapsed .sidebar-footer {
    opacity: 0;
    height: 0;
    padding: 0;
    border: none;
    overflow: hidden;
    transition: all 0.6s ease;
    /* 与侧边栏主容器过渡时间保持一致 */
    background: transparent;
    /* 确保背景透明，避免闪烁 */
  }

  /* 折叠状态下的激活指示器隐藏 */
  .collapsed .active-indicator {
    display: none;
  }

  /* 提示：如果需要修改折叠状态下的图标大小，可以在这里添加特殊样式例如：例如： */

  .collapsed .nav-icon {
    width: 32px;
    height: 32px;
    font-size: 18px;
    margin-left: 15px;
  }

  /* 滚动条美化样式 */
  .sidebar-main::-webkit-scrollbar {
    width: 4px;
  }

  .sidebar-main::-webkit-scrollbar-track {
    background: transparent;
  }

  .sidebar-main::-webkit-scrollbar-thumb {
    background: rgba(52, 152, 219, 0.3);
    border-radius: 2px;
    transition: background 0.3s ease;
  }

  .sidebar-main::-webkit-scrollbar-thumb:hover {
    background: rgba(52, 152, 219, 0.6);
  }

  .sidebar-main::-webkit-scrollbar-thumb:active {
    background: rgba(52, 152, 219, 0.8);
  }

  /* 响应式设计 - 移动端适配 */
  @media (max-width: 768px) {
    .modern-sidebar {
      transform: translateX(-100%);
      /* 默认隐藏 */
    }

    .modern-sidebar:not(.collapsed) {
      transform: translateX(0);
      /* 非折叠状态显示 */
    }
  }

  /* 点击交互效果 */
  .nav-item:active {
    transform: scale(0.98);
  }

  .nav-item.active:active {
    transform: translateX(4px) scale(0.98);
  }
</style>
